Skip to content

fix: custom component not trigger on dismiss function#132

Merged
xiaoluoboding merged 2 commits intoxiaoluoboding:mainfrom
oxwazz:main
Jul 26, 2025
Merged

fix: custom component not trigger on dismiss function#132
xiaoluoboding merged 2 commits intoxiaoluoboding:mainfrom
oxwazz:main

Conversation

@oxwazz
Copy link
Copy Markdown
Contributor

@oxwazz oxwazz commented Jun 26, 2025

Description

Currently, toast.dismiss() only works with toasts created using toast() or similar built-in APIs, but not with toast.custom().

Solution

This implementation registers custom toasts in the internal toast queue, allowing them to be dismissed using toast.dismiss().

References

If you create your custom toast, toast.dismiss will not work (i forgot the reason tho). I think the toast.dismiss only close the original toast, not our custom toast.

Vue sonner do not provide clear api to close the toast. After going deeper into the code, it turns out that to close the toast, we need to create emitter named closeToast and then emit it. Just try it out, and see if that works

Originally posted by @thoriqadillah in #50

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 26, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
vue-sonner ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 26, 2025 3:00am

@xiaoluoboding
Copy link
Copy Markdown
Owner

xiaoluoboding commented Jul 16, 2025

Hey @oxwazz, I think we already resolve this issue.

How to trigger the close toast function: https://github.com/xiaoluoboding/vue-sonner/blob/main/app/components/HeadlessToast.vue#L9

@oxwazz
Copy link
Copy Markdown
Contributor Author

oxwazz commented Jul 17, 2025 •
edited
Loading

Hey @xiaoluoboding — yes, we can close individual toasts using $emit('closeToast'). However, to close all toasts, we need to call toast.dismiss(), which isn't currently supported for toast.custom().
This PR adds the ability to dismiss all custom toasts via toast.dismiss(). 🙌

@xiaoluoboding
Copy link
Copy Markdown
Owner

xiaoluoboding commented Jul 17, 2025 •
edited
Loading

Hey @xiaoluoboding — yes, we can close individual toasts using $emit('closeToast'). However, to close all toasts, we need to call toast.dismiss(), which isn't currently supported for toast.custom(). This PR adds the ability to dismiss all custom toasts via toast.dismiss(). 🙌

Can you give me an example. maybe write in https://github.com/xiaoluoboding/vue-sonner/blob/main/app/components/HeadlessToast.vue

@oxwazz
Copy link
Copy Markdown
Contributor Author

oxwazz commented Jul 26, 2025

I've added an example for the "Close All" functionality in HeadlessToast.vue
Please see the attached video demonstrating it
Thank you!

out.mp4

@xiaoluoboding xiaoluoboding merged commit 10c05c4 into xiaoluoboding:main Jul 26, 2025
1 check passed
@xiaoluoboding
Copy link
Copy Markdown
Owner

xiaoluoboding commented Jul 26, 2025

I've added an example for the "Close All" functionality in HeadlessToast.vue Please see the attached video demonstrating it Thank you!

out.mp4

Thanks, @oxwazz, The documented changes help me clearly understand the requirements and make prompt decisions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@oxwazz @xiaoluoboding